Massive

HTML5 Multipurpose Multi-page & One-page theme

Thanks for purchasing Massive - Multipurpose HTML5 template.

Installation

  1. Unzip the file and find out the folder HTML. There are all html template files in this folder. 

  2. Folder Structure is as follows

       3. You will need to Upload these files to your Web Server using FTP in order to use it on your Website. And other files can be used according to your preferences.

      4. Now enjoy the theme and adding section/feature according to your need.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="corporate, creative, general, portfolio, photography, blog, e-commerce, shop, product, gallery, retina, responsive">

    <!--favicon icon-->
    <link rel="icon" type="image/png" href="assets/img/favicon.png">

    <title>Massive Home</title>

    <!--common style-->
    <link href='http://fonts.googleapis.com/css?family=Abel|Source+Sans+Pro:400,300,300italic,400italic,600,600italic,700,700italic,900,900italic,200italic,200' rel='stylesheet' type='text/css'>

    <!-- inject:css -->
    <link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/vendor/animate/animate.css">
    <link rel="stylesheet" href="assets/vendor/elasic-slider/elastic.css">
    <link rel="stylesheet" href="assets/vendor/iconmoon/linea-icon.css">
    <link rel="stylesheet" href="assets/vendor/magnific-popup/magnific-popup.css">
    <link rel="stylesheet" href="assets/vendor/owl-carousel/owl.carousel.css">
    <link rel="stylesheet" href="assets/vendor/owl-carousel/owl.theme.css">
    <link rel="stylesheet" href="assets/vendor/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/shortcodes.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/default-theme.css">
    <!-- endinject -->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="assets/vendor/backward/html5shiv.js"></script>
    <script src="assets/vendor/backward/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <!-- preloader start -->
    <div id="tb-preloader">
        <div class="tb-preloader-wave"></div>
    </div>
    <!-- preloader end -->

    <div class="wrapper">

        <!--header start-->
        <header class="l-header l-header_overlay">
        ...
        </header>
        <!--header end-->

        <!--hero section-->
        <div  class="parallax text-center vertical-align home-banner">
            <div class="container-mid">
                <div class="container">
                    ...
                </div>
            </div>
        </div>
        <!--hero section-->

        <!--body content start-->
        <section class="body-content">
            <div class="page-content">
                <div class="container">
                    <div class="row">
                        ...
                    </div>
                </div>
            </div>
        </section>
        <!--body content end-->

        <!--footer start -->
        <footer id="footer" class="dark">
            <!--primary footer-->
            <div class="primary-footer">
                ...
            </div>
            <!--primary footer end-->

            <!--secondary footer-->
            <div class="secondary-footer">
                ...
            </div>
            <!--secondary footer end-->
        </footer>
        <!--footer end-->
    </div>

    <!-- inject:js -->
    <script src="assets/vendor/modernizr/modernizr.js"></script>
    <script src="assets/vendor/jquery/jquery-1.10.2.min.js"></script>
    <script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/vendor/breakpoint/breakpoint.js"></script>
    <script src="assets/vendor/count-to/jquery.countTo.js"></script>
    <script src="assets/vendor/countdown/jquery.countdown.js"></script>
    <script src="assets/vendor/easing/jquery.easing.1.3.js"></script>
    <script src="assets/vendor/easy-pie-chart/jquery.easypiechart.min.js"></script>
    <script src="assets/vendor/elasic-slider/jquery.eislideshow.js"></script>
    <script src="assets/vendor/flex-slider/jquery.flexslider-min.js"></script>
    <script src="assets/vendor/gmap/jquery.gmap.min.js"></script>
    <script src="assets/vendor/images-loaded/imagesloaded.js"></script>
    <script src="assets/vendor/isotope/jquery.isotope.js"></script>
    <script src="assets/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
    <script src="assets/vendor/mailchimp/jquery.ajaxchimp.min.js"></script>
    <script src="assets/vendor/menuzord/menuzord.js"></script>
    <script src="assets/vendor/nav/jquery.nav.js"></script>
    <script src="assets/vendor/owl-carousel/owl.carousel.min.js"></script>
    <script src="assets/vendor/smooth/smooth.js"></script>
    <script src="assets/vendor/touchspin/touchspin.js"></script>
    <script src="assets/vendor/typist/typist.js"></script>
    <script src="assets/vendor/sticky/jquery.sticky.min.js"></script>
    <script src="assets/vendor/visible/visible.js"></script>
    <script src="assets/vendor/wow/wow.min.js"></script>
    <script src="assets/js/scripts.js"></script>
    <!-- endinject -->
</body>
</html>

Layout Settings

Massive theme support both boxed and wide Layouts. For boxed Layouts you need to add class name boxed into the <body> tag like this <body class="boxed"> 

You can set BG color/ Banckground image/ Background pattern into boxed view

For Bg color : <body class="boxed box-bg">

For Background image:  <body class="boxed box-background-img">

For Background pattern:  <body class="boxed box-pattern">

You can edit  to change BG color/ Banckground image/ Background pattern into css file.

Theme Color

You can change your website's Theme Color Scheme in an instant. You simply need to change the Color Code in the assets/css/default-theme.css file. We have few default scheme like green-theme.css, red-theme.css etc. 
 
Make sure you add the assets/css/default-theme.css in your head after the assets/css/style.css stylesheets.
 
<head>
    ...
    <!--theme color -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link href="assets/css/default-theme.css" rel="stylesheet">
    ....
</head>

Font Change

We are using google font. So you can feel free to use any google font what you like best. Massive used google font Source Sans Pro 

You can find the Link to the <head>  tag of all the .html files. like this

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,300italic,400italic,600,600italic,700,700italic,900,900italic,200italic,200' rel='stylesheet' type='text/css'>

And you have to add the font name into css file like

font-family: 'Source Sans Pro', sans-serif;

Page Title

Massive have 10 different page title

  1. Default Title
  2. Background Title
  3. Background Transparent Title
  4. Parallax Transparent Title
  5. No Background Title
  6. Pattern Title
  7. Center Align Title
  8. Right Align Title
  9. Dark Title
  10. Mini Title

1. Default Title

Default Page Title style with Text Left aligned & Breadcrumbs Right aligned.

<!--page title start-->
<section class="page-title">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h4 class="text-uppercase">page title</h4>
                <span>Sub title</span>
                <ol class="breadcrumb">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Shortcodes</a></li>
                    <li class="active">Page Title</li>
                </ol>
            </div>
        </div>
    </div>
</section>
<!--page title end-->

 

2. Background Title

<section class="page-title background-title dark">
    ....
</section>

 

3. Background Transparent Title

<!--header start-->
<!-- Note: Use semi transparent, dark transparent or light transparent header -->
<!--header end-->

<!--page title start-->
<section class="page-title background-title dark">
    ...
</section>
<!--page title end-->

 

4. Parallax Transparent Title

<!--header start-->
<!-- Note: Use semi transparent, dark transparent or light transparent header -->
<!--header end-->

<!--page title start-->
<section class="page-title parallax-title ">
    ...
</section>
<!--page title end-->

 

5. No Background Title

<!--page title start-->
<section class="page-title no-bg">
    ...
</section>
<!--page title end-->

 

6. Pattern Title

<!--page title start-->
<section class="page-title pattern-title">
    ...
</section>
<!--page title end-->

 

7. Center Align Title

<!--page title start-->
<section class="page-title page-title-center">
    ...
</section>
<!--page title end-->

 

8. Right Align Title

<!--page title start-->
<section class="page-title page-title-right">
    ...
</section>
<!--page title end-->

 

9. Dark Title

<!--page title start-->
<section class="page-title dark">
    ...
</section>
<!--page title end-->

 

10. Mini Title

<!--page title start-->
<section class="page-title mini-title">
    ...
</section>
<!--page title end-->

 

 

 

 

 

Page Section

The standard page section has the following

<!--section-->
<div class="page-content">
    <div class="container">
        <div class="row">
            <!--title-->
            <div class="heading-title text-center">
                <h3 class="text-uppercase">Section Title </h3>
                <span class="text-uppercase">sub title </span>
            </div>
            <!--title-->
            <div class="col-md-12">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias aliquam blanditiis,
                    corporis debitis et eum fugit magni minima nostrum nulla omnis pariatur perferendis,
                    perspiciatis, quos saepe sed? Ea, sint.</p>
            </div>
        </div>
    </div>
</div>
<!--section-->

Section Background color change

you can change the section background color. like gray/dark. For gray background color please add extra class name gray-bg and For dark background color add class name dark-bg

For Gray background color 

<!--section-->
<div class="page-content gray-bg">
    <div class="container">
        <div class="row">
             ....            
        </div>
    </div>
</div>
<!--section-->

For Dark background color 

<!--section-->
<div class="page-content dark-bg">
    <div class="container">
        <div class="row">
             ....            
        </div>
    </div>
</div>
<!--section-->

Section Parallax 

For section parallax add extra class name parallax-inner full-width and set your parallax image

<!--parallax-->
<div class="parallax-inner full-width" style="background-image: url('img/parallax/para1.jpg')">
    <div class="container-fluid ">
        <div class="row">
            <div class="col-md-12">
                ...
            </div>
        </div>
    </div>
</div>
<!--parallax-->

 

 

 

Section Extra Classes

We have created some useful helper classes for you. Here are a few of them:

Some margin top/bottom classes

/* --------------------------------------------------------------
    pre-defined >  margin top | margin bottom
---------------------------------------------------------------*/

/*margin top*/

.m-top-0{
    margin-top: 0px !important;
}
.m-top-10 {
    margin-top: 10px;
}
.m-top-15 {
    margin-top: 15px;
}
.m-top-20 {
    margin-top: 20px;
}
.m-top-25 {
    margin-top: 25px;
}
.m-top-30 {
    margin-top: 30px;
}
.m-top-35 {
    margin-top: 35px;
}
.m-top-40 {
    margin-top: 40px;
}
.m-top-50 {
    margin-top: 50px;
}
.m-top-80 {
    margin-top: 80px;
}
.m-top-100 {
    margin-top: 100px;
}

.m-top-0, .m-top-10, .m-top-15, .m-top-20, .m-top-25, .m-top-30, .m-top-35, .m-top-40, .m-top-50, .m-top-80, .m-top-100,
.m-bot-0, .m-bot-10, .m-bot-15, .m-bot-20, .m-bot-25, .m-bot-30, .m-bot-35, .m-bot-40, .m-bot-50, .m-bot-80, .m-bot-100{
    display: inline-block;
}

/*margin bottom*/

.m-bot-0 {
    margin-bottom: 0px !important;
}
.m-bot-10 {
    margin-bottom: 10px;
}

.m-bot-15 {
    margin-bottom: 15px;
}

.m-bot-20 {
    margin-bottom: 20px;
}

.m-bot-25 {
    margin-bottom: 25px;
}

.m-bot-30 {
    margin-bottom: 30px;
}

.m-bot-35 {
    margin-bottom: 35px;
}

.m-bot-40 {
    margin-bottom: 40px;
}

.m-bot-50 {
    margin-bottom: 50px;
}

.m-bot-80 {
    margin-bottom: 80px;
}

.m-bot-100 {
    margin-bottom: 100px;
}

 

Some padding classes

/*padding top*/
.p-top-0{
    padding-top: 0px !important;
}
.p-top-10 {
    padding-top: 10px;
}
.p-top-15 {
    padding-top: 15px;
}
.p-top-20 {
    padding-top: 20px;
}
.p-top-25 {
    padding-top: 25px;
}
.p-top-30 {
    padding-top: 30px;
}
.p-top-35 {
    padding-top: 35px;
}
.p-top-40 {
    padding-top: 40px;
}
.p-top-50 {
    padding-top: 50px;
}
.p-top-80 {
    padding-top: 80px;
}
.p-top-100 {
    padding-top: 100px;
}
.p-tb-10 {
    padding: 10px 0;
}
.p-tb-20 {
    padding: 20px 0;
}
.p-tb-30 {
    padding: 30px 0;
}
.p-tb-50 {
    padding: 50px 0;
}
.p-tb-100 {
    padding: 100px 0;
}
.p-tb-150 {
    padding: 150px 0;
}
.p-tb-200 {
    padding: 200px 0;
}
.p-top-0 {
    padding-top: 0 !important;
}
.p-bot-0 {
    padding-bottom: 0 !important;
}

Portfolio

Portfolio filter structure is following

<!--filter-->
<div class="text-center">
    <ul class="portfolio-filter">
        <li class="active"><a href="#" data-filter="*"> All</a></li>
        <li><a href="#" data-filter=".cat1">printing</a></li>
        <li><a href="#" data-filter=".cat2">Web</a></li>
        <li><a href="#" data-filter=".cat3">illustration</a></li>
        <li><a href="#" data-filter=".cat4">media</a></li>
        <li><a href="#" data-filter=".cat5">crafts</a></li>
    </ul>
</div>
<!--filter-->

Portfolio Item structure is following

<div class="portfolio col-3 gutter ">
    <!--portfolio item-->
    <div class="portfolio-item cat1 cat3 ">
        <div class="thumb">
            <img src="img/portfolio/01.jpg" alt="">
            <div class="portfolio-hover">
                <div class="action-btn">
                    <a href="img/portfolio/01.jpg" class="popup-link" title="lightbox view"> <i class="icon-basic_magnifier"></i>  </a>
                </div>
                <div class="portfolio-description">
                    <h4><a href="img/portfolio/01.jpg" class="popup-link" title="lightbox view">lightbox view</a></h4>
                    <p><a href="#">category</a></p>
                </div>
            </div>
        </div>
    </div>
    <!--portfolio item-->
</div>

We have 5 column option (2 col, 3 col, 4 col, 5 col and 6 col) with gutter and gutter less

If you want to show 3 column portfolio items then code as follows

<div class="portfolio col-3 ">
    ...
</div>

ere just added class name col-3 into portfolio tag like  <div class="portfolio col-3 ">

Similarly you can set

column 2 col-2

column 4 col-4

column 5 col-5

column 6 col-6

and if you need gutter of those column the just add a gutter class name like this

<div class="portfolio col-3 gutter ">
    ...
</div>

Portfolio Masonry

For masonry view just add class name portfolio-masonry like as follows

<div class="portfolio portfolio-masonry col-3 gutter">
    ...
</div>

Portfolio with Title 

Portfolio with title structure are as follows

<div class="portfolio portfolio-with-title col-3 gutter ">

    <div class="portfolio-item cat1 cat3 ">
        <!--portfolio image-->
        <div class="thumb">
            <img src="img/portfolio/01.jpg" alt="">
            <div class="portfolio-hover">
                <div class="action-btn">
                    <a href="img/portfolio/01.jpg" class="popup-link" title="lightbox view"> <i class="icon-basic_magnifier"></i>  </a>
                </div>
            </div>
        </div>
        <!--portfolio image-->

        <!--portfolio title-->
        <div class="portfolio-title">
            <h4><a href="img/portfolio/01.jpg" class="popup-link" title="lightbox view">lightbox view</a></h4>
            <p><a href="#">category 1</a> , <a href="#">category 3</a> </p>
        </div>
        <!--portfolio title-->

    </div>
</div>

 

 

 

Blog

Classic Image Blog post structure are as follows.

<!--classic image post-->
<div class="blog-classic">
    <div class="date">
        24
        <span>MAR 2015</span>
    </div>
    <div class="blog-post">
        <div class="full-width">
            <img src="img/post/p12.jpg" alt=""/>
        </div>
        <h4 class="text-uppercase"><a href="blog-single.html">standard blog post with photo</a></h4>
        <ul class="post-meta">
            <li><i class="fa fa-user"></i>posted by <a href="#">admin</a></li>
            <li><i class="fa fa-folder-open"></i> <a href="#">lifestyle</a>, <a href="#">travel</a>, <a href="#">fashion</a></li>
            <li><i class="fa fa-comments"></i> <a href="#">4 comments</a></li>
        </ul>
        <p>Lid est laborum dolo rumes fugats untras. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerums unsers sadips amets.. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.  </p>
        <a href="blog-single.html" class="btn btn-small btn-dark-solid  "> Continue Reading</a>
    </div>
</div>
<!--classic image post-->

Post Type

You can use different types of Post Types:

 

 

Appear Animation

f you want to use animation for some element, you need to add class wow fadeInLeft to this element and set data attribute like this:

<div class="wow fadeInLeft" data-wow-delay="0.1s" data-wow-duration="2s">
    ...
</div>

The full list of appear animation effects you can find here - http://daneden.github.io/animate.css/.

Shortcodes

We've 20+ pre made shortcode elements. and all shortcode css are defined in the folder assets/sass/shortcodes

 

Contact Form

There are 3 contact form variations contact-us-1.html, contact-us-2.html and contact-us-3.html. It's really really simple to setup contact form. You'll find contact form configurations in mailer/config.php file. Open that config file in your favorite editor and change the values accoding to sample code given below.

return array(
    /**
     * Email settings
     */
    'mailer' => array(
        'subject'    => 'Website Contact Form', // Email subject
        'from_email' => 'from@example.com', // Use one of your emails to avaid spam issue
        'from_name'  => 'Jane Doe', // Use a know name eg: Mr. Web Form :)
        'to_email'   => 'to@example.com', // Email recipient address
        'to_name'    => '' // Optional
        ),

    /**
     * Fields map
     */
    'fields_map' => array(
        'DEFAULT' => array(
            'name'     => 'Name',
            'email'    => 'Email',
            'subject'  => 'Subject',
            'comments' => 'Message',
            ),

        'FORM_ALT' => array(
            'name'     => 'Name',
            'email'    => 'Email',
            'phone'    => 'Phone No',
            'subject'  => 'Subject',
            'comments' => 'Message',
            ),
        )
    );

Mailchimp

You can setup Mailchimp Subscriptions anywhere on your Website by simply Copy / Pasting the sample code present in the HTML Files.

<form class="form-inline mailchimp">
    <input id="sf-1" type="email" class="form-control" placeholder="Enter your email address">
    <button type="submit" class="btn btn-medium btn-rounded btn-dark-solid text-uppercase" >subscribe</button>
    <label for="sf-1"></label>
</form>

Add following js file in your page

<!-- Mailchimp -->
<script src="js/mailchimp/jquery.ajaxchimp.min.js"></script>

And paste mailchip url into "sripts.js" file line# 625 shown bellow

/* ---------------------------------------------
 Mailchimp Init
 --------------------------------------------- */
if ($.fn.ajaxChimp) {
    $('.mailchimp').ajaxChimp({
        /**
         * Example mailchimp url
         * //blahblah.us1.list-manage.com/subscribe/post?u=5afsdhfuhdsiufdba6f8802&id=4djhfdsh9'
         */
        url: 'paste mailchip url'
    });
}

 

PSD and Mockup

Here is PSD files link. You can download it from here Click Here

 

Credits

Image Credits

 

jQuery

 

Upgrade

To upgrade from older to v2.0 you may replace the img, css and js folder. Please do not forget to backup your files before the upgrade. If you encountered any problem during the upgrade please contact our support at themebucket@gmail.com

End

Thanks for purchasing Massive - Multipurpose HTML5 template.

If you have any questions, feel free to contact us at themebucket@gmail.com